<template>
  <van-field 
    v-bind="$attrs" 
    :type="type"
    :right-icon="rightIcon" 
    @click-right-icon="clickRightIcon"
  />
</template>
<script setup lang="ts">
import { ref } from "vue"
const type = ref<'text' | 'password'>('password')
const rightIcon = ref<'eye-o' | 'closed-eye'>('eye-o')

const clickRightIcon = () => {
  switch(type.value){
    case 'text': 
      type.value = 'password'
      rightIcon.value = 'closed-eye'
      break
    case 'password': 
      type.value = 'text'
      rightIcon.value = 'eye-o'
      break
  }
}

</script>

<style lang="less" scoped></style>
